<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            background-color: yellow;

            /* 显示的列数 */
            column-count: 5;

            /* 调整列间距 */
            column-gap: 30px;

            /* 列边框 */
            column-rule: 2px solid rebeccapurple;

            /* 列高度统一 */
            /* column-fill: auto; */
            /* auto 把父盒子占满*/

            /* 调整列宽 */
            /* column-width: 500px; */
        }

        div>h1{
            /* 横跨所有列 */
            column-span: all;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <h1>能能酱酱</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ratione, quaerat ipsa culpa esse, ullam quo a placeat libero repellendus fugiat commodi doloribus doloremque corporis tempora at soluta, id inventore?
    Velit quo aliquid reiciendis, aperiam quibusdam dignissimos reprehenderit eligendi at aliquam ex veniam dicta perferendis et, deleniti temporibus consequatur culpa eaque numquam harum architecto repudiandae dolore! Dolore expedita nemo ipsum.
    Tenetur ducimus consectetur dolorem totam quidem atque consequuntur alias distinctio, quasi voluptas odio veniam eius repellat. Deserunt aliquam nesciunt maxime quos facilis provident, natus nulla voluptatibus, tenetur fugit necessitatibus animi.
    Sed temporibus, ullam aspernatur in, culpa deleniti quia totam blanditiis repellendus quaerat asperiores distinctio, possimus placeat esse nihil. Veniam nemo repudiandae eveniet. A quia natus quibusdam nihil minima officia dolorem.
    Autem rerum quae mollitia obcaecati eveniet quo labore nihil aspernatur odit modi voluptatem, nam laborum cumque maiores quis reprehenderit sed! Voluptatibus ipsa porro doloremque reiciendis illum vitae architecto saepe quod.
    Porro deleniti delectus debitis, distinctio adipisci hic quae dignissimos! Consequuntur magnam maiores mollitia assumenda rerum voluptatem eligendi et quisquam sit. Quia placeat corporis nisi quod unde, maxime architecto minima inventore.</div>
</body>
</html>